<template>
  <div class="container">
    <el-button type="primary" @click="handleShowAdd">添加</el-button>
    <el-button type="primary" @click="getFileList">刷新</el-button>
    <el-table :data="tableData" stripe border>
      <el-table-column prop="id" label="ID" width="80" align="center"/>
      <el-table-column prop="name" label="作品" width="120" align="center"/>
      <el-table-column prop="author" label="作者" width="120" align="center"/>
      <el-table-column prop="title" label="标题" width="120" align="center"/>
      <el-table-column prop="content" label="内容" align="center"/>
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handlePreviewFile(scope.$index, scope.row)">预览</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :destroy-on-close="true" v-el-drag-dialog :visible.sync="dialogTableVisible" title="操 作"
               center :fullscreen="fullscreen" @dragDialog="handleDrag" top="0">
      <el-form ref="form" label-position="left" label-suffix=" :" :model="form" label-width="80px">
        <el-form-item label="作品">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" placeholder="请输入内容" v-model="form.content" :autosize="{ minRows: 10, maxRows: 200}" maxlength="50" show-word-limit/>
        </el-form-item>
        <el-form-item label="文件">
          <el-upload ref="upload" drag :data="form" :action="`${baseJava}/file`"
                     :file-list="form.fileList" :auto-upload="true" :limit="1"
                     :on-remove="handleRemove" :before-remove="beforeRemove"
                     :on-success="handleSuccess" :on-error="handleError"
                     :on-preview="handlePreview" :on-exceed="handleExceed" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-form-item>
        <el-form-item label="操作">
          <el-button type="primary" @click="onSubmit">保存数据</el-button>
          <el-button @click="dialogTableVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {baseJava, baseNode} from "@/api/base";
  import {clearObjectValue} from '@/utils/validate'
  import FileList from "@/api/file-list";
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

  const fileListApi = new FileList();
  export default {
    name: "FileList",
    directives: {elDragDialog},
    data() {
      return {
        baseJava,
        tableData: [],
        dialogTableVisible: false,
        fullscreen: false,
        form: {
          name: 'name',
          author: 'author',
          title: 'title',
          content: 'content',
          type: [],
          fileUrl: null,
        }
      }
    },
    mounted() {
      this.getFileList()
    },
    methods: {
      // 表格
      handlePreviewFile(index, row) {
        console.log(index, row);
        this.$store.dispatch('fileUrl/setFileUrl', baseNode + row.fileUrl)
        // this.$router.push({path: '/hello', query: row})
        // this.$router.push({name: 'hello', params: row})
        // let routeData = this.$router.resolve({
        //   path: "/hello",
        //   query: row,
        // });
        window.open("#/hello", '_blank');
      },
      async getFileList() {
        const fileList = await fileListApi.getFileList({});
        console.log('fileList: ', fileList)
        this.tableData = fileList;
      }, // 获取列表信息
      handleShowAdd() {
        this.dialogTableVisible = true
        this.form = clearObjectValue(this.form)
      },
      async handleAdd() {
        const addFileList = await fileListApi.addFileList(this.form);
        console.log(addFileList)
      }, // 新增数据
      async handleEdit(index, row) {
        const byFileId = await fileListApi.getByFileId(row.id);
        if (byFileId.fileUrl) byFileId.fileList = [{name: byFileId.fileUrl, url: byFileId.fileUrl}]
        this.form = byFileId
        this.dialogTableVisible = true
        console.log(index, row);
      },
      async handleDelete(index, row) {
        console.log(index, row);
        const deleteByFileId = await fileListApi.deleteByFileId(row);
        this.$message({type: 'info', message: deleteByFileId ? '删除成功' : '删除失败'})
        await this.getFileList()
      },
      // 模态框
      handleDrag(dragDom) {
        console.log('模态框移动了')
      },
      handleRemove(file, fileList) {
        console.log('file: ', file, 'fileList: ', fileList)
      }, // 文件列表移除文件时的钩子
      async beforeRemove(file, fileList) {
        console.log('file: ', file, 'fileList: ', fileList)
        delete this.form.fileList
        const deleteByFileId = await fileListApi.deleteByUploadFileId(this.form);
        this.$message({type: 'info', message: deleteByFileId ? '删除成功' : '删除失败'})
      }, // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
      handleSuccess(response, file, fileList) {
        console.log('response: ', response, 'file: ', file, 'fileList: ', fileList)
        this.getFileList()
        this.form = response
        this.$message({type: 'success', message: '上传成功'})
      }, // 文件上传成功时的钩子
      handleError(err, file, fileList) {
        console.log('err: ', err, 'file: ', file, 'fileList: ', fileList)
      }, // 文件上传失败时的钩子
      handlePreview(file) {
        console.log('file: ', file)
      }, // 点击文件列表中已上传的文件时的钩子
      handleExceed(files, fileList) {
        console.log('files: ', files, 'fileList: ', fileList)
        this.$message({type: 'error', message: '文件超出最大上传限制，请删除原文件后再上传'})
      }, // 文件超出个数限制时的钩子
      submitUpload() {
        this.$refs.upload.submit();
      }, // 手动上传文件方法
      async onSubmit() {
        delete this.form.fileList
        if (this.form.id) {
          const updateByFileId = await fileListApi.updateByFileId(this.form);
          this.$message({type: 'info', message: updateByFileId})
          console.log(updateByFileId)
        } else {
          const addFileList = await fileListApi.addFileList(this.form);
          this.$message({type: 'info', message: addFileList})
          console.log(addFileList)
        }
        await this.getFileList()
      }, // 提交表格
    }
  }


</script>

<style lang="scss" scoped>

</style>
